
<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <title></title>
    <link rel = "stylesheet" href="../static/css/style.css">
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jDIWum5BVw19QwZwSAdHWoL44lHF8QFM"></script>
	<style>
		.smart-green {
			margin-left: auto;
			margin-right: auto;
			max-width: 500px;
			background: #F8F8F8;
			padding: 30px 30px 20px 30px;
			font: 12px Arial, Helvetica, sans-serif;
			color: #666;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
		}

		.smart-green h1 {
			font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
			padding: 20px 0px 20px 40px;
			display: block;
			margin: -30px -30px 10px -30px;
			color: #FFF;
			background: #9DC45F;
			text-shadow: 1px 1px 1px #949494;
			border-radius: 5px 5px 0px 0px;
			-webkit-border-radius: 5px 5px 0px 0px;
			-moz-border-radius: 5px 5px 0px 0px;
			border-bottom: 1px solid #89AF4C;
		}
        .smart-green ul li {
            float: left;  //横向排列
            text-align:center
            background-color: #80A24A;
         }

		.smart-green h1 > span {
			display: block;
			font-size: 11px;
			color: #FFF;
		}

		.smart-green label {
			display: block;
			margin: 0px 0px 5px;
		}

		.smart-green #location {
			float: left;
			margin-top: 10px;
			color: #5E5E5E;
		}
		.smart-green label > p {
			float: left;
			margin-top: 10px;
			color: #5E5E5E;
		}

		.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
			color: #555;
			height: 30px;
			line-height: 15px;
			width: 100%;
			padding: 0px 0px 0px 10px;
			margin-top: 2px;
			border: 1px solid #E5E5E5;
			background: #FBFBFB;
			outline: 0;
			-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
			box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
			font: normal 14px/14px Arial, Helvetica, sans-serif;
		}

		.smart-green textarea {
			height: 100px;
			padding-top: 10px;
		}


		.smart-green .button {
			background-color: #9DC45F;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-border-radius: 5px;
			border: none;
			padding: 10px 25px 10px 25px;
			color: #FFF;
			text-shadow: 1px 1px 1px #949494;
		}

		.smart-green .button:hover {
			background-color: #80A24A;
		}

		.error-msg{
			color: red;
			margin-top: 10px;
		}
		.success-msg{
			color: #80A24A;
			margin-top: 10px;
			margin-bottom: 10px;
		}
	</style>

</head>

<body>

<form action="/message_form/" method="post" class="smart-green">
    {% csrf_token %}
    <h1>药植物收集信息
        <span>请填写以下信息.</span>
    </h1>
    <section>

      <li role="presentation" class="active"><a href="http://127.0.0.1:8000/blog/index">首页</a></li>
    </section>
    <label>
        <span>药植物名称 :</span>
        <input id="name" type="text"  name="name" class="error" placeholder="请输入名称"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <select id="type" type="text"  name="type" class="error" placeholder="请输入分类">
          <option value="藏药">藏药</option>
          <option value="彝药">彝药</option>
          <option value="羌药">羌药</option>
        </select>
        <div class="error-msg"></div>
    </label>

    <label>
    <span>图片上传 :</span>
      <div class="layui-input-block">
         <input type="hidden" id="img_url">
         <input type="file" onchange="showImg()" id="img_file"><img src="" alt="" id="img_id" style="width: 100px">
  		</div>
    </label>

    <label>
        <span>产量 :</span>
        <input id="value" type="number"  name="value" placeholder="请输入产量"/>
        <div class="error-msg"></div>
    </label>

<!--    <label>-->
<!--        <span>原产地 :</span>-->
<!--        <input id="address" type="text" value="" name="address" placeholder="请输入原产地"/>-->
<!--        <div class="error-msg"></div>-->
<!--    </label>-->

    <label>
        <div id="location">
<!--        <p>省份：<span id="province"></span> 城市：<span id="city"></span></p>-->
        省份:<input id="province" type="text"  name="province" placeholder=""/>
        城市:<input id="city" type="text"  name="city" placeholder=""/>
        </div>
       <div class="main-div">
        <form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
        <table cellspacing="1" cellpadding="3" width="100%">
            <tr>
                <td class="label">经度</td>
                <td><input type="text" name="lng" id="lng" value=""/>
                </td>
            </tr>
            <tr>
                <td class="label">纬度</td>
                <td><input type="text" name="lat" id="lat" value=""/>
                </td>
            </tr>
            <tr>
                <td class="label">地址</td>
                <td>
                    <input type='text' value='' name='sever_add' id='sever_add' readonly>
                    <input type='button' value='点击显示地图获取地址经纬度' id='open'>
                </td>
            </tr>
        </table>
        </form>
       </div>
        <label>
        <span>介绍 :</span>
        <textarea id="message" name="message"  placeholder="请输入药植物介绍"></textarea>
        <div class="error-msg"></div>
        </label>

        <div class="error-msg"></div>
            <div class="success-msg"></div>
    <label>
        <span>&nbsp;</span>
        <input  type="submit" class="button" value="提交" onclick="confirm('感谢你的支持')"/>
        <a href="http://127.0.0.1:8000/blog/index" class="button" role="button">返回首页</a>
    </label>
    </label>
</form>
 <div id='allmap' style='width: 50%; height: 100%; position: absolute; display: none'></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var markersArray = [];
    var geolocation = new BMap.Geolocation();

      function validate() {
        var sever_add = document.getElementsByName('sever_add')[0].value;
        if (isNull(sever_add)) {
            alert('请选择地址');
            return false;
        }
        return true;
    }
    //获取城市
   geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(r.point.lng + "__" + r.point.lat);
            getAddress(r.point.lng, r.point.lat);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })
    //判断是否是空
    function isNull(a) {
        return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;
    }

    document.getElementById('open').onclick = function () {
        if (document.getElementById('allmap').style.display == 'none') {
            document.getElementById('allmap').style.display = 'block';
        } else {
            document.getElementById('allmap').style.display = 'none';
        }
    }




    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12); // 中心点
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            map.enableScrollWheelZoom(true);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true})
    map.addEventListener("click", showInfo);


    //清除标识
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                map.removeOverlay(markersArray[i])
            }
        }
    }
    //地图上标注
    function addMarker(point) {
        var marker = new BMap.Marker(point);
        markersArray.push(marker);
        clearOverlays();
        map.addOverlay(marker);
    }
    //点击地图时间处理
    function showInfo(e) {
        document.getElementById('lng').value = e.point.lng;
        document.getElementById('lat').value =  e.point.lat;
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            if (confirm("确定要地址是" + address + "?")) {
                document.getElementById('allmap').style.display = 'none';
                document.getElementById('sever_add').value = address;
            }
        });
        addMarker(e.point);
    }
    //获取城市地址
        function getAddress(lng, lat) {
        var myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述
        myGeo.getLocation(new BMap.Point(lng, lat), function (result) {
            if (result) {
                var province = result.addressComponents.province;
                var city = result.addressComponents.city;
                var detail = result.address;
                console.log(province)
                console.log(city)
                document.getElementById("province").innerText = province;
                document.getElementById("city").innerText = city;
                document.getElementById("detail").innerText = detail;
            }
        });
    }
    function showImg(){
            // var img_file =  $("#img_file").val();
            var file =  document.getElementById('img_file').files[0];
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function(re){
                $('#img_id').attr("src", re.target.result);
            }
        }
</script>